<template>
    <div class="container">
        <div style="display:flex;justify-content:space-between">
            <el-card class="box-card">
                <div style="margin-bottom:20px">
                    <span style="font-size:20px;color:green;font-weight:800">派影信息</span>
                    <el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
                </div>
                <div v-for="item in msg" :key="item">{{ item }}</div>
            </el-card>
            <el-card class="box-card">
                <div style="margin-bottom:20px">
                    <span style="font-size:20px;color:blue;font-weight:800">工团建设</span>
                    <el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
                </div>
                <div v-for="item in msg2" :key="item">{{ item }}</div>
            </el-card>
        </div>
        <div style="display:flex;justify-content:space-between">
            <el-card class="box-card">
                <div style="margin-bottom:20px">
                    <span style="font-size:20px;color:green;font-weight:800">学术会议</span>
                    <el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
                </div>
                <div v-for="item in msg3" :key="item" style="width: 360px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;">{{ item }}</div>
            </el-card>
            <el-card class="box-card">
                <div style="margin-bottom:20px">
                    <span style="font-size:20px;color:blue;font-weight:800">招标通知</span>
                    <el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
                </div>
                <div v-for="item in msg4" :key="item" style="width: 360px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;">{{ item }}</div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueManageMinelectures',

    data() {
        return {
            msg: [
                '派影故事', '院史考据', '派影医院报'
            ],
            msg2: [
                '党建', '工会', '团委', '十字宣传栏'
            ],
            msg3: [
                '国家科技部“3D打印技术在医疗领域的应用与分析”培训班英语志愿者招募', '国家科技部“3D打印技术在医疗领域的应用与分析”培训班招生通知', '卵巢癌学习班最终会议通知', '第十六届全国消化内镜诊断与治疗新进展学习班暨护士内镜消毒与保养学习班', '第十四届上海国际大肠癌高峰论坛'
            ],
            msg4: [
                '复旦大学附属中山医院 共享轮椅服务 比选公告', '中山医院关于三类止血防粘连产品的通知', '设备科进口设备采购外贸代理机构比选公告', '中山医院医生服、护士服招标中标目录', '设备科院外委托招标项目招标公司比选公告'
            ],
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.container {
    width: 900px;
    margin: 0 auto;
}
li {
    list-style: circle;
}
.box-card {
    width: 400px;
}
.el-card{
    margin: 40px;
}
</style>